// import React from 'react'
import ReactDOM from 'react-dom'
import loadingImg from './image/1.gif'
import './index.css'
import World from './World'

function Hello() {
  return <span>Hello</span>
}

// function World() {
//   const loading = true
//   return loading ? <img src={loadingImg} /> : <span>World{true}</span>
// }

function ReplyButton() {
  const label = '回应'
  return <button style={{ fontSize: '20px', color: 'red' }}>{label}</button>
}

function HelloWorld() {
  const highlight = true
  return (
    // React.Fragment 也可以不用写<></> 空标签   不会生成任何标签
    <>
      <td>
        <Hello />
      </td>
      <td>
        <World />
      </td>
      <td colSpan={'1'} className={'action' + (highlight ? ' hg' : '')}>
        <ReplyButton></ReplyButton>
      </td>
    </>
  )
}

function LoginButton() {
  return <button>登录</button>
}

// SPA
function App() {
  const isLogin = false
  return (
    <div>
      <table border="1">
        <tbody>
          <tr>
            <HelloWorld></HelloWorld>
          </tr>
        </tbody>
      </table>
      <ReplyButton></ReplyButton>
      {!isLogin && <LoginButton />}
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

// JSX是React.createElement的语法糖
